<template>
 <div>
   <header></header>
   <div class="title"></div>
   <ul class="goods-list">
     <li>
       <a :href="tgUrl" ca="201788_cxjh5_promote88_buyCoupon$途观专区 17寸">
        <dl>
          <dt>
            <p class="des">
              途观专区 17寸
            </p>
            <p class="price" >
              <span><i>¥</i>470</span><cite>门市价¥830</cite>
            </p>
            <p class="goto">
              <span>立即抢购</span>
            </p>
          </dt>
          <dd>
            <img src="../../assets/image/promote88/tg.png" />
          </dd>
        </dl>
      </a>
     </li>
     <li>
       <a :href="pstUrl" ca="201788_cxjh5_promote88_buyCoupon$帕萨特专区 18寸">
        <dl>
          <dt>
            <p class="des">
              帕萨特专区 18寸
            </p>
            <p class="price" >
              <span><i>¥</i>570</span><cite>门市价¥980</cite>
            </p>
            <p class="goto">
              <span>立即抢购</span>
            </p>
          </dt>
          <dd>
            <img src="../../assets/image/promote88/pst.png" />
          </dd>
        </dl>
      </a>
     </li> 
     <li>
       <a :href="jwUrl" ca="201788_cxjh5_promote88_buyCoupon$君威专区 17寸">
        <dl>
          <dt>
            <p class="des">
              君威专区 17寸
            </p>
            <p class="price" >
              <span><i>¥</i>470</span><cite>门市价¥830</cite>
            </p>
            <p class="goto">
              <span>立即抢购</span>
            </p>
          </dt>
          <dd>
            <img src="../../assets/image/promote88/jw.png" />
          </dd>
        </dl>
      </a>
     </li> 
     <li>
       <a :href="jyUrl" ca="201788_cxjh5_promote88_buyCoupon$君越专区 18寸">
        <dl>
          <dt>
            <p class="des">
              君越专区 18寸
            </p>
            <p class="price" >
              <span><i>¥</i>570</span><cite>门市价¥980</cite>
            </p>
            <p class="goto">
              <span>立即抢购</span>
            </p>
          </dt>
          <dd>
            <img src="../../assets/image/promote88/jy.png" />
          </dd>
        </dl>
      </a>
     </li> 
     <li>
       <a :href="akwUrl" ca="201788_cxjh5_promote88_buyCoupon$昂科威专区 17寸">
        <dl>
          <dt>
            <p class="des">
              昂科威专区 17寸
            </p>
            <p class="price" >
              <span><i>¥</i>470</span><cite>门市价¥830</cite>
            </p>
            <p class="goto">
              <span>立即抢购</span>
            </p>
          </dt>
          <dd>
            <img src="../../assets/image/promote88/akw.png" />
          </dd>
        </dl>
      </a>
     </li> 
   </ul>
   <a class="goto-page" :href="fhcUrl">钜惠风暴  冰价来袭 >></a>
   <div class="slidebar">
			<a :href="homeUrl" class="icon-tozhu" ca="201788_cxjh5_promote88_sidebar_tozhu$主会场"></a>
			<a href="javascript:void(0)" v-if="isApp" @click="share" class="btn-share" ca="201788_cxjh5_promote88_sidebar_share$分享"></a>
			<a href="javascript:void(0)" @click="goTop" class="gotop" ca="201788_cxjh5_promote88_sidebar_Top$返回顶层"></a>
		</div>
 </div>
</template>
<script type="text/javascript">
import common from "../../assets/js/common.js";
import {Toast, Popup} from 'mint-ui';
import Vue from 'vue';
Vue.component(Popup.name, Popup);
export default {
    data: function() {
        return {
            tgUrl: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('7C692EF55A083499FAD8682C93D9D203.htm') : this.changeUrl('290E72BCA0ED405882D400F4466BBE4A.htm'),
            pstUrl: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('7C692EF55A08349982D400F4466BBE4A.htm') : this.changeUrl('290E72BCA0ED405835E9B08969199539.htm'),
            jwUrl: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('7C692EF55A08349935E9B08969199539.htm') : this.changeUrl('290E72BCA0ED40587BD365C8E045E6F8.htm'),
            jyUrl: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('7C692EF55A0834997BD365C8E045E6F8.htm') : this.changeUrl('290E72BCA0ED405826099395781F7E22.htm'),
            akwUrl: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('7C692EF55A08349926099395781F7E22.htm') : this.changeUrl('290E72BCA0ED40587FCDECCC5F500479.htm'),
            signUrl: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? common.isEnv("//recruit") : common.isEnv("//wx"),
            isApp: common.isApp(),
            loadAppUrl: '//cxb.chexiang.com/service/version/getLatestAppVersion/0?channel=cx_cxj_xzy_0807_88ltzqyl',
            homeUrl: common.isEnv('//c') + '/promotion/88zhuhuichang.htm?channel=cx_home_201788_cxjh5_20170801',
            fhcUrl: process.env.NODE_ENV == 'development' ? '/cxjpsessions/cxjpsessions.html' : '/cx/cxj/cxjweb/cxjpsessions/cxjpsessions.shtml'
        }
    },
    mounted: function() {
      //打点
      this.$nextTick(function () {
      	common.ANA_AnalyticsScan();
      });
      //监控返回顶部按钮是否显示
			this.isShowTopBtn();
      //分享
      this.initShareInfo();
    },
   methods: {
      //分享信息
    	initShareInfo() {
				var _this = this;
				_this.shareObj = {
					friend:{
						title: "上汽车主看过来！",
						desc: "热销车型轮胎低到想不到！抢到这一波，少吃半年土！",
						imgUrl: "https://s1.cximg.com/cms/wap/resource/chexiangjiaM/active/1788fhc/image/share.png",
						link: common.isEnv("//cxjapp") +"/cx/cxj/cxjweb/promote88/hotsale/hotsale.shtml?channel=cx_cxj_xzy_0807_88ltzqyl"
					},
					friendQuan:{
						title: "上汽车主看过来！",
						desc: "热销车型轮胎低到想不到！抢到这一波，少吃半年土！",
						imgUrl: "https://s1.cximg.com/cms/wap/resource/chexiangjiaM/active/1788fhc/image/share.png",
						link: common.isEnv("//cxjapp") +"/cx/cxj/cxjweb/promote88/hotsale/hotsale.shtml?channel=cx_cxj_xzy_0807_88ltzqyl"
					}
				}

				//分享判断渠道
				if(!_this.isApp){
					common.wxShare(_this);
				}
			},
			//分享
			share() {
				var _self = this;
				lb.shareInfo({
					title: _self.shareObj.friend.title,
					url: _self.shareObj.friend.link,
					content: _self.shareObj.friend.desc,
					imgUrl: _self.shareObj.friend.imgUrl
				} ,(data) => {
					if (data.errorCode === '0') {
							//Toast('分享成功');
					}else{
							Toast('分享失败');
					}
				});
			},
      //选择城市
			showSelectCity(code) {
				var _this = this;
				if(_this.isApp) {						
					window.location.href = "selectCity/selectCity." + common.isHtml() + '?skuCode=' + code;
				}else {
					window.location.href = _this.loadAppUrl;
				}         
			},
      //判断渠道是否加checklogin, app加前置登录
			changeUrl (val) {
				if(val =='') return 'javascript:void(0)';
				if(common.isApp()){
					return common.isEnv('//cxj.activity') + "/service/error/check_login_and_tologin?backUrl="+encodeURI(common.isEnv('https://h.mall') + '/mdseDetail_v2/' + val);
				}else {
					return common.isEnv('//h.mall') + '/mdseDetail_v2/' + val;
				}
			},
      //返回顶部
			goTop() {
				//获取当前scrollTop的位置
				var curScroll = $(document.body).scrollTop();
         
				//上升的位移
				var speed = 5; 
				if(curScroll>0){
						setInterval(timer,1);
				}
				function timer(){ 
					if(curScroll>0){ 
						curScroll = curScroll-speed;
						$(document.body).scrollTop(curScroll);
						if(curScroll<=0){ 
							$(document.body).scrollTop(0);
							clearInterval(timer);
							//console.log("清除计时器") 
						}
					}
				}
      },
      isShowTopBtn() {
				$(window).scroll(()=>{
					let top = document.documentElement.scrollTop || document.body.scrollTop;
          if(top >= 30) {
						$(".gotop").css('display','block');
					}
					else {
						$(".gotop").css('display','none');
					}
				})
			}
    }
}  
  
</script>
<style lang="scss" scope>
@import '../../assets/css/common.scss';
@function rem($px){
  @return $px / 20 * 1rem;
}
body{
   background-color:#0c35a5;
   padding-bottom:rem(80);
   max-width:750px;
   margin:0 auto;
}
header{
  background:transparent url("../../assets/image/promote88/head.png") no-repeat top left;
  width:rem(750);
  height:rem(707);
  background-size:cover;
}
.sideBtn{height:rem(81);width:rem(81);display:inline-block;margin-bottom:rem(24);border-radius: 50%;box-shadow: 0 1px 1px #555;}
.title{
  background:transparent url("../../assets/image/promote88/title.png") no-repeat top left;
  width:rem(750);
  height:rem(117);
  background-size:cover;
}
.goods-list{
  li{
    margin: 0 rem(20) rem(30) rem(20);
    background-color:#fff;
    clear:both;
    overflow:hidden;
    dt,dd{
      width:50%;
      float:left;
    }
    dd img{
      width:100%;
    }
    dt{
      padding:rem(10) rem(10) rem(10) rem(30);
      .des{
         font-size:rem(40);
         margin-top:rem(20);
         color:$_333;
      }
      .price{
        margin-top:rem(20);
        span{
          font-size:rem(58);
          color:#e1121c;
          i{
            font-size:rem(30);
          }
        }
        cite{
          font-size:rem(24);
          margin-left:rem(10);
          color:#999;
          text-decoration:line-through;
        }
      }
      .goto{
        margin-top:rem(15);
        span{
          display:inline-block;
          width:rem(250);
          height:rem(55);
          background-color:#1fb8ec;
          text-align:center;
          line-height:rem(55);
          font-size:rem(32);
          color:#fff;
          border-radius:rem(10);
        }
      }
    }
  }
}
.goto-page{
  display:block;
  border:3px solid #47a6ff;
  background-color:#0c35a5;
  color:#47a6ff;
  height:rem(80);
  line-height:2;
  font-size:rem(36);
  text-align:center;
  width:100%;
  max-width:750px;
  position:fixed;
  bottom:0;
  z-index:2;
  box-sizing:border-box;
}
.slidebar{position: fixed;width:rem(81); bottom:rem(50);right:rem(12);z-index: 200;
  .gotop{@extend .sideBtn;display:none;background:url(../../assets/image/cxjpsessions/icon-gotop.png) no-repeat;background-size:100%;}
  .btn-share{@extend .sideBtn;background:url(../../assets/image/cxjpsessions/btn-icon-share.png) no-repeat;background-size:100%;}
  .icon-tozhu{@extend .sideBtn;background:url(../../assets/image/cxjpsessions/icon-tozhu.png) no-repeat;background-size:100%;}
}
</style>

